import React, { useState, useEffect } from 'react'
import { View, Image, Text } from '@tarojs/components'
import MD5 from 'MD5'
import { AtTabs, AtButton,AtModal, AtModalHeader, AtModalContent, AtModalAction  } from 'taro-ui'
import ToLogin from '../../compontents/toLogin'
import Taro from '@tarojs/taro'
import lhTool from 'lh-tool'


import useModel from 'flooks';
import store from '../../stores/index'
import api from '../../http/api'
const { nsOrderList,nsTicketStatus } = api

import './index.less'
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/modal.scss";


export default (props: any) => {
  const [current, setCurrent] = useState(0)
  const [showModal,setShowModal] = useState(false)
  const [ticketCode,setTicketCode]= useState('')
  const [ticStatus,setTicStatus] = useState(0)
  // 用户信息
  const info: any = Taro.getStorageSync('info')
  const { loginId, nickName, tel, uSchoolId } = JSON.parse(info).userInfo
  const [list, setList] = useState([])
  useEffect(() => {
    getList(current)
    api.concatInfo({ uSchoolId }).then((res: any) => {
      setData(res.data)
    })
  }, [])
  const tabChange = (e) => {
    console.log(e)
    setCurrent(e)
    const status = e === 0 ? 0 :e === 1 ? 2 : 3
    getList(status)
  }
  const getList = (status) => {
    nsOrderList({
      loginId,
      status,
      uSchoolId
    }).then((res: any) => {
      setList(res.data)
    })
  }
  const formatStatus = (status) => {
    let str
    switch (status) {
      case 2:
        str = '未使用'
        break;
      case 3:
        str = '已使用'
        break;
      default:
        break;
    }
    return str
  }
  const formatStatusBtn = (status) => {
    let str
    switch (status) {
      case 1:
        str = '确认付款'
        break;
      case 2:
        str = '删除'
        break;
      case 3:
        str = '去使用'
        break;
      case 4:
        str = '删除'
        break;
      case 5:
        str = '删除'
        break;
      default:
        break;
    }
    return str
  }
  const [isOpened, setIsOpened] = useState(false)

  const [data, setData]: any = useState({
    id: 1,
    txt3: "18171873020",
    txt4: "13321280684",
    txt5: "3083487518",
    txt6: "",
    uSchoolId: 1
  })
  const onClose = () => {
    setIsOpened(false)
  }
  // 点击订单按钮
  const btnClick = (item:any)=>{
    const {ticketCode} = item
    setTicketCode(ticketCode)
    setShowModal(true)
    nsTicketStatus({ticketCode}).then((res:any)=>{
      setTicStatus(res.data.status)
    })
  }
  const modalClose = ()=>{
    setShowModal(false)
  }
  // 点击退款按钮
  const toPay = ()=>{
    setIsOpened(true)
  }

  return (
    <View className='uOrder'>
      <ToLogin url='/pages/active/index'></ToLogin>
      <AtTabs
        className="tabs"
        current={current}
        scroll
        tabList={[
          {
            title: '全部'
          },
          {
            title: '待使用'
          },
          {
            title: '已使用'
          },
        ]}
        onClick={tabChange}>
      </AtTabs>
      {
        list.length ? <View>
          {
            list.map((item: any, i: any) => (
              <View className='list'>
                <View className='top'>
                  <Text className='t1'>订单编号：{item.orderNum}</Text>
                  <Text className={item.status===2?'t3':'t2'}>{formatStatus(item.status)}</Text>
                </View>
                <View className='center'>
                  <Image className='img' src={item.nsBusinessDetail.url} />
                  <View className='txt'>{item.nsBusinessDetail.title}</View>
                </View>
                <View className='bottom'>
                  <View className='b1'>{lhTool.formatDate.format(new Date(item.time), 'yyyy/MM/dd hh:mm:ss')}</View>
                  <View className='b2'>￥{item.price}</View>
                </View>
                <View className={item.status===1||item.status===3?'active tool':'tool'}>
                  {
                    item.status===3?<AtButton className='btnPay' onClick={()=>{toPay()}} size='small'>申请退款</AtButton>:<AtButton onClick={()=>{btnClick(item)}} size='small'>去使用</AtButton>
                  }
                </View>
              </View>
            ))
          }
        </View> : <View className='noData'>
          <Image className='noDataImg' src={IMGSRC+'noData.png'} />
          <View className='txt'>您还没有该类订单哦~</View>
        </View>
      }
      <AtModal isOpened={showModal} onClose={modalClose}>
        <View className='ticCode'>
          <View className='ticStatu' style={{color:ticStatus===2?'#333':'red'}}>券状态：{ticStatus===2?'待使用':'已使用'}</View>
          <Image className='img' src={`${APISRC}qrcode?text=https://ticket.zhongningwenhua.com/pages/nsIndex/index?ticket=${ticketCode}`} />
          <View className='txt'>{ticketCode}</View>
        </View>
      </AtModal>

      <AtModal isOpened={isOpened} onClose={onClose}>
        <AtModalHeader>请联系我们申请退款</AtModalHeader>
        <AtModalContent>
          <View className='concat'>TEL1：{data.txt3}</View>
          <View className='concat'>TEL2：{data.txt4}</View>
          <View className='concat'>QQ1：{data.txt5}</View>
          <View className='concat'>QQ2：{data.txt6}</View>
        </AtModalContent>
      </AtModal>
    </View>
  );
};
